<template>
    <transition>
        <div style="pointer-events: auto;">
            <div class="efomo-main-content">
                <h5 class="efomo-h5">{{$t('m.efomo.biling.content.tit')}} <span
                        @click="aShowTip({id:'1',explainShow:true})">?</span></h5>
                <div class="efomo-tit-asset">
                    <span>{{ fomoInfo.bankSurplus }}</span>ETSC
                </div>
                <div class="efomo-main-input">
                    <div class="efomo-input-left efomo-h5">
                        <div class="efomo-left-type" :class="type == 1? 'border-active' : ''"
                             @click="changeType(1)">{{$t('m.efomo.biling.content.type')[0]}}
                        </div>
                        <span @click="aShowTip({id:'2',explainShow:true})">?</span>
                        <div class="efomo-left-type" :class="type == 0? 'border-active' : ''"
                             @click="changeType(0)">{{$t('m.efomo.biling.content.type')[1]}}
                        </div>
                        <span @click="aShowTip({id:'3',explainShow:true})">?</span>
                    </div>
                    <div class="efomo-input-right">
                        <h5>{{$t('m.efomo.biling.content.inputBox.tit')}}</h5>
                        <div class="efomo-num-input">
                            <span @click="add(-1)">-</span>
                            <input type="number" min="1" v-model="num">
                            <span @click="add(1)">+</span>
                        </div>
                        <p>{{$t('m.efomo.biling.content.inputBox.text')[0]}} {{num * fomoInfo.minInvest_}} ETSC</p>
                    </div>
                </div>
                <div class="efomo-main-tip">
                    <p>{{$t('m.efomo.tips')[0]}}</p>
                </div>
                <div class="efomo-main-btn">


                    <button @click="investPre('invest')" v-if = "activated">
                        {{$t('m.efomo.biling.content.inputBox.text')[1]}} ETSC {{$t('m.efomo.title')[1]}}
                    </button>
                    <button v-else style="background-color: rgb(151, 152, 154);border-color: rgb(151, 152, 154);">
                        {{$t('m.efomo.biling.content.inputBox.text')[1]}} ETSC {{$t('m.efomo.title')[1]}}
                    </button>
                    <p>{{$t('m.efomo.biling.content.inputBox.text')[2]}}:&nbsp; {{ balance.ETSC | roundOff(2) }}
                        ETSC</p>
                </div>
            </div>
            <!--底部列表-->
            <div v-if="investList.length > 0" class="efomo-main-foot">
                <div class="efomo-main-list">
                    <h5>{{$t('m.efomo.list.tit')[0]}}</h5>
                    <ul class="efomo-list-type">
                        <li>{{$t('m.efomo.list.type')[0]}}</li>
                        <li>{{$t('m.efomo.list.type')[1]}}</li>
                        <li>{{$t('m.efomo.list.type')[2]}}</li>
                        <li>{{$t('m.efomo.list.type')[3]}}</li>
                    </ul>
                    <ul v-for="v in investList" class="efomo-list-item">
                        <li>{{v.timestamp | time2DateFomo}}</li>
                        <li>
                            <template v-if="v.type == 1">{{$t('m.efomo.biling.content.type')[0]}}</template>
                            <template v-else-if="v.type == 0">{{$t('m.efomo.biling.content.type')[1]}}</template>
                            <template v-else> {{$t('m.efomo.biling.content.type')[2]}} </template>
                        </li>
                        <li class="price">{{ v.eth }}</li>
                        <li>
                            <template v-if="v.status == 0">{{$t('m.efomo.success')[2]}}</template>
                            <template v-else>{{$t('m.efomo.success')[0]}}</template>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </transition>
</template>

<script>
    import '@/assets/css/efomo.scss'
    import {myAlert} from "@/assets/js/h5plus/nativeUI";
    import axios from 'axios';
    import {AESDecrypt} from '@/assets/js/utils/crypto'
    import {invest} from '@/assets/js/etherjs/fomo/fomo'
    import {getInit} from '@/assets/js/etherjs/fomo/fomo'

    export default {
        name: "biling",
        data() {
            return {
                num: 1,
                pathName: 'biling',
                type: 1,
                investList: [],
                request: {
                    pageNo: 1,
                    pageSize: 20,
                    address: "",
                    isEnd: false,
                },
                activated:false,
            }
        },
        mounted() {
            // 1.设置头部
            this.$parent.title = this.$t('m.efomo.title')[1];
            this.$parent.init();
        },
        watch: {
            prompt(v) {
                if (v.isConfirm) {
                    let pKey = AESDecrypt({
                        pwd: v.value,
                        msg: this.walletActive.pKey
                    });
                    if (pKey == '') {
                        myAlert({
                            msg: this.$t('m.wallet.manager.index.prompt[7]'),
                            button: this.$t('m.wallet.manager.index.prompt[4]')
                        });
                        return
                    }
                    this.aWalletDecode({
                        pKey: pKey
                    });
                    if (v.complete == 'invest') {
                        // computed计算到的变化，不及时？
                        this.invest();
                    }
                }
            }
        },
        methods: {
            changeType(v) { //切换购买类型
                this.type = v
            },
            add(v) {
                if ((this.num + v) >= 1) {
                    this.num += v;
                }
                if (this.num > 200) {
                    this.num = 200;
                }
            },
            init() {
                this.request.pageNo = 1;
                this.request.isEnd = false;
                this.request.address = this.walletActive.address;
                this.request.bID = this.fomoInfo.bID;
                this.activated = this.fomoInfo.activated;
                !this.activated && this.aShowTip({id:'com_cue',explainShow:true})
                this.investList = [];
                return this.getInvestList();
            },
            getInvestList() {
                if (this.request.isEnd) return new Promise((resolve) => {
                    resolve(1);
                });
                return axios.get(this.requestConfig.apiHost + "/client/fomo/invest/list", {
                    params: this.request
                }).then((response) => {
                    if (response.data.error_code != 0) {
                        throw new Error("get list error");
                    }
                    let list = response.data.data.list;
                    this.investList = this.investList.concat(list);
                    if (list.length < 15) this.request.isEnd = true;
                }).catch((error) => {
                    myAlert({
                        msg: "获取数据失败",
                        button: this.$t('m.wallet.transaction.list.prompt[9]')
                    });
                    console.log(error);
                });
            },
            getMore() {
                this.request.pageNo++;
                return this.getInvestList();
            },
            investPre(v) {
                if(!this.activated) return;
                if (Number(this.balance.ETSC) <= this.fomoInfo.minInvest_) {
                    console.log("余额不足");
                    this.plusDiff(() => {
                        plus.nativeUI.toast(this.$t('m.efomo.toast[0]'), {verticalAlign: 'center'});
                    });
                    return;
                }

                if (this.walletDecode.pKey == "") {
                    this.aPrompt({
                        show: true,
                        title: this.$t('m.my.identity.prompt[7]'),
                        cancel: this.$t('m.my.identity.prompt[8]'),
                        confirm: this.$t('m.my.identity.prompt[6]'),
                        type: "password",
                        placeholder: this.$t('m.my.identity.prompt[7]'),
                        complete: v
                    })
                } else {
                    this.invest();
                }
            },
            async invest() {
                console.log("投单开始");
                // 最大投弹量小于200
                if (this.num > 200) {
                    this.plusDiff(() => {
                        plus.nativeUI.toast(this.$t('m.efomo.toast[2]'), {verticalAlign: 'center'});
                    });
                    return;
                }
                this.plusDiff(() => {
                    plus.nativeUI.toast(this.$t('m.efomo.toast[1]'), {verticalAlign: 'center'});
                });
                let res = await invest({
                    privateKey: this.walletDecode.pKey,
                    type: this.type,
                    eth: this.num * this.fomoInfo.minInvest_
                });
                if (res == 0) {
                    console.log("投单失败");
                    this.plusDiff(() => {
                        plus.nativeUI.toast(this.$t('m.efomo.toast[2]'), {verticalAlign: 'center'});
                    });
                } else {
                    // 先刷新 fomoInfo数据
                    await getInit(this.walletActive.address);

                    console.log("投单成功");
                    this.plusDiff(() => {
                        plus.nativeUI.toast(this.$t('m.efomo.toast[3]'), {verticalAlign: 'center'});
                    });
                    this.$parent.synBalanceOnce();
                }
            }
        }
    }
</script>

<style lang="scss">
    .disable_btn{
        background-color: rgb(151, 152, 154); 
        border: 1px solid rgb(151, 152, 154);

    }
    .enable_btn{
        background-color: #e5bc8e;
        border: 1px solid #e5bc8e;
    }
</style>